<%--
  Created by IntelliJ IDEA.
  User: 凡人
  Date: 2021/11/29
  Time: 11:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <!--视口 自适应-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.2.1.js" rel="script"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.js" rel="script"></script>
    <script src="${pageContext.request.contextPath}/static/My97DatePicker/WdatePicker.js" rel="script"></script>

</head>
<body>
    <form action="" method="post">
        品牌:<input type="text" name="brand">
        品类:<input type="text" name="type">
        产品编号:<input type="text" name="code">
        发布时间:<input type="text" readonly="readonly" onclick="WdatePicker()" name="addtime"><br><br>
        主版本号:<input type="text" name="mainVersion">
        从版本号:<input type="text" name="formVersion"><br><br>
        制作人:<input type="text" value="${user.user}">
        审核人:<input type="text" name="auditor">
        总用量:<input type="text" name="totalAmount" readonly="readonly"><br><br>
        制图文件:<input type="file" id="file" name="file" onchange="upFile(this)">
            <div id="pic"></div> <br>
        备注:<input type="text" name="content"><br><br>
        <a href="javascript:void(0)" onclick="addCol()">添加</a>
        <table class="table">
            <thead>
            <tr>
                <th scope="col">生产阶段</th>
                <th scope="col">层级</th>
                <th scope="col">物料编号</th>
                <th scope="col">物料名称</th>
                <th scope="col">型号规格</th>
                <th scope="col">单位</th>
                <th scope="col">用量</th>
                <th scope="col">位置</th>
                <th scope="col">备注</th>
                <th scope="col">
                    操作
                </th>
            </tr>
            </thead>
            <tbody id="tbody">
            <tr>
                <td><input type="text" name="details[0].stage"></td>
                <td><input type="text" name="details[0].tier"></td>
                <td><input type="text" name="details[0].code"></td>
                <td><input type="text" name="details[0].name"></td>
                <td><input type="text" name="details[0].spec"></td>
                <td><input type="text" name="details[0].unit"></td>
                <td><input type="text" name="details[0].dosage" class="dosage" onblur="js()"></td>
                <td><input type="text" name="details[0].place"></td>
                <td><input type="text" name="details[0].remark"></td>
                <td><a href="javascript:void(0)" onclick="remCol(this)">删除</a></td>
            </tr>
            </tbody>
        </table>
        <input type="button" value="提交" id="but">
    </form>

</body>
<script>
    //提交
    $("#but").click(function(){
        $.post("./add",$("form").serialize(),function(msg){
            if(msg=="ok"){
                $("#nav-tabContent").load("./list");
            }
        })
    })

    //图片
    function upFile(obj){
        var formdata = new FormData();
        formdata.append('file',obj.files[0]);
        $.ajax({
            url:"upFile",
            data:formdata,
            type:"post",
            contentType:false,
            processData:false,
            success:function(url){
                $("#pic").empty();
                if(url!=null && url!=''){
                    $("#pic").append('<input type="hidden" name="image" value="'+url+'">');
                    $("#pic").append('<img src="'+url+'" width="50px" height="50px">');
                }
            }
        })
    }

    //添加行
    var i = 1;
    function addCol(){
        $("#tbody").append('<tr> ' +
            '<td><input type="text" name="details['+i+'].stage"></td> ' +
            '<td><input type="text" name="details['+i+'].tier"></td> ' +
            '<td><input type="text" name="details['+i+'].code"></td> ' +
            '<td><input type="text" name="details['+i+'].name"></td> ' +
            '<td><input type="text" name="details['+i+'].spec"></td> ' +
            '<td><input type="text" name="details['+i+'].unit"></td> ' +
            '<td><input type="text" name="details['+i+'].dosage" class="dosage" onblur="js('+i+')"></td> ' +
            '<td><input type="text" name="details['+i+'].place"></td> ' +
            '<td><input type="text" name="details['+i+'].remark"></td> ' +
            '<td><a href="javascript:void(0)" onclick="remCol(this)">删除</a></td> ' +
            '</tr>')
    }
    function remCol(obj){
        $(obj).parent().parent().remove();
    }
    function js(a){
        var sum = 0;
        $(".dosage").each(function (){
            sum+=Number($(this).val());
        })
        $('[name="totalAmount"]').val(sum);
    }
</script>
</html>
